<template lang="pug">
  .vuex
    h1 {{ name }}
    input(type="text" v-model="msg", placeholder="输入标题")
    .btn-box
      //- button(@click="NEWNAME({msg})") 更改标题
      button(@click="change") 更改标题
      button(@click="addmsg({string:'😊'})") 标题添加😊
    .list
      button(@click="FILTER_TODOS") 获取周董的歌
      ul
        li(v-for="item in todos" :key="item.id") {{item.text}}
      router-link(to="/") 首页
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
      msg: ''
    }
  },
  computed: {
    haha () {
      return ''
    },
    ...mapState(['name', 'todos'])
  },
  methods: {
    change () {
      if (this.msg) {
        this.$store.commit({
          type: 'NEWNAME',
          msg: this.msg
        })
        this.msg = ''
      } else {
        alert('标题不能为空哦')
      }
    },
    ...mapMutations(['FILTER_TODOS']),
    ...mapActions(['addmsg'])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.vuex{
  h1{
    font-size: 28px;
  }
  input{
    border: 0;
    width: 500px;
    border-bottom: 1px solid #ddd;
    text-align: center;
    padding-bottom: 10px;
    outline: none;
    font-size: 28px;
  }
  .btn-box{
    margin-top: 30px;
  }
  button{
    outline: none;
    width: 210px;
    height: 90px;
    background: #fef56f;
    border-radius: 12px;
    margin-right: 12px;
  }
  .list{
    margin-top: 200px;
    ul{
    li{
      list-style: none;
      text-align: left;
      margin-bottom: 20px;
    }
  }
  }
}
</style>
